<template>
	<view>
		<view class="" style="margin: 30rpx;">
			<u-search :placeholder=" $getText('请输入商品')" v-model="keyword" bgColor="#fff" :showAction="false"
				@search="search"></u-search>
			<u-tabs :list="list1" @click="click" :current="current" lineColor="#303133" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#bebebe',
			            transform: 'scale(1)'
			        }"></u-tabs>

			<view class="items">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="" style="color: #999999;font-size: 24rpx;">
						订单编号: {{item.order_no ||item.order.order_no }}
					</view>
					<view class="flex" style="margin: 20rpx 0;">
						<!-- <image src="../../static/lo.png" mode=""></image> -->
						<image :src="$wanlshop.oss(item.image, 100, 100)" mode="aspectFill"></image>
						<view class=""
							style="height: 180rpx;display: flex;flex-direction: column;justify-content: space-between;flex: 1;">
							<view class="" style="font-weight: 600;line-height: 32rpx;color: #1E1E1E;">
								{{item.title}}
							</view>
							<view class="flex" style="justify-content: space-between;">
								<view class=""
									style="font-size: 24rpx;color: #999999;background-color: #f1f1f1;padding: 4rpx 12rpx;border-radius: 4rpx;">
									规格:{{item.difference}}
								</view>
								<view class="" style="font-size: 26rpx;color: #999999;">
									×{{item.number}}
								</view>
							</view>
							<view class="" style="color: #FFC400;font-size: 32rpx;font-weight: 600;">
								￥{{item.pay.price}}
							</view>
						</view>

					</view>
					<view class="flex" style="justify-content: space-between;">
						<view class="" style="color: #6A6A6A;font-size: 24rpx;">
							下单时间：{{formatTimestamp(item.createtime)}}
						</view>
						<view class="" v-if="state==5">
							<view class="btn"
								style="color: white;background-color: black;padding: 12rpx 24rpx;border-radius: 100px;"
								@click="aggree(item.id)" v-if="item.state==0">
								同意/拒绝
							</view>
							<view class="btn"
								style="color: red;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;"
								v-if="item.state==2">
								已拒绝
							</view>
							<view class="btn"
								style="color: red;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;"
								v-if="item.state==5">
								退款已关闭
							</view>
							<view class="btn"
								style="color: green;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;"
								v-if="item.state==4">
								成功退款
							</view>
							<view class="btn"
								style="color: green;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;"
								v-if="item.state==1">
								已同意退款
							</view>
							<view class="btn"
								style="color: green;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;"
								v-if="item.state==7">
								退款中
							</view>
						</view>
						<view class="" v-else>
							<view v-if="item.refund_status" class="btn"
								style="color: red;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;">
								退款中
							</view>
							<view v-else-if="state==2" class="btn"
								style="color: white;background-color: black;padding: 12rpx 24rpx;border-radius: 100px;"
								@click="send(item.id)">
								立即发货
							</view>
							<view v-else-if="state==3" class="btn"
								style="color: #66b0ff;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;">
								发货中
							</view>
							<view v-else-if="state==6" class="btn"
								style="color: green;background-color: white;padding: 12rpx 24rpx;border-radius: 100px;">
								已完成
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<u-action-sheet :actions="list2" title="确认退款?" :show="show" cancelText="取消" @close="show=false"
			@select="select"></u-action-sheet>
		<u-modal :show="show2" title="请输入拒绝理由" showCancelButton @cancel="show2=false" @confirm="confirm1">
			<view class="slot-content" style="width: 100%;">
				<u--textarea v-model="value1" placeholder="请输入拒绝理由" style="width: 100%;"></u--textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				value1: "",
				current: 0,
				state: 2,
				show: false,
				show2: false,
				chooseId: null,
				list2: [{
						name: '确认退款',
						color: '#000000',
						fontSize: '20'
					},
					{
						name: '拒绝退款',
						color: '#ff6355',
						fontSize: '20'
					},
				],
				list1: [{
					name: '待发货',
					state: 2,
				}, {
					name: '已发货',
					state: 3,
				}, {
					name: '已完成',
					state: 6,
				}, {
					name: '退货/售后',
					state: 5,
				}],
				list: []
			}
		},

		async onShow() {
			this.list = [];
			let param = {
				state: this.state
			}
			if (this.keyword) {
				param = {
					keyword: this.keyword,
					state: this.state
				}
			}
			await uni.request({
				url: '/index/myOrder',
				data: param,
				method: "GET",
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					this.list = res.data.filter(item => {
						return !item.refund_info || item.refund_info.state == '2' || item
							.refund_info.state == '5' || item.refund_info.state == '8'
					})
				}
			});
		},
		methods: {
			async confirm1() {
				let param = {

				}
				if (this.keyword) {
					param = {
						keyword: this.keyword

					}
				}
				let that = this;
				if (!this.value1) {
					return
				}
				await uni.request({
					url: '/index/refuse',
					method: "POST",
					data: {
						"refuse_content": this.value1,
						id: this.chooseId
					},
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					},
					success: async res => {
						await uni.request({
							url: '/index/refundList',
							data: param,
							method: "GET",
							header: {
								isAdmin: true,
								token: uni.getStorageSync("shop_login_token")
							},
							success: res => {
								that.list = res.data;
								that.show2 = false;
							}
						});

					}
				});
			},
			async select(e) {
				let param = {

				}
				if (this.keyword) {
					param = {
						keyword: this.keyword

					}
				}
				let that = this;
				if (e.name == "确认退款") {

					await uni.request({
						url: '/refund/agree/ids/' + this.chooseId,
						method: "POST",
						header: {
							isAdmin: true,
							token: uni.getStorageSync("shop_login_token")
						},
						success: async res => {
							await uni.request({
								url: '/index/refundList',
								data: param,
								method: "GET",
								header: {
									isAdmin: true,
									token: uni.getStorageSync("shop_login_token")
								},
								success: res => {
									that.list = res.data
								}
							});

						}
					});
				}
				if (e.name == "拒绝退款") {
					this.show2 = true;

				}
			},
			aggree(id) {
				this.chooseId = id;
				this.show = true;
			},
			formatTimestamp(timestamp) {
				// 创建 Date 对象
				const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
				// 获取年份、月份、日期、小时、分钟、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			async click(e) {
				console.log(e)
				let param = {

				}
				if (this.keyword) {
					param = {
						keyword: this.keyword

					}
				}
				if (this.current == e.index) return;
				this.current = e.index;
				this.state = e.state;
				this.list = [];
				if (e.index == 3) {
					await uni.request({
						url: '/index/refundList',
						data: param,
						method: "GET",
						header: {
							isAdmin: true,
							token: uni.getStorageSync("shop_login_token")
						},
						success: res => {
							this.list = res.data
						}
					});
					return
				}
				this.search()
			},
			async search() {
				let param = {
					state: this.state
				}
				if (this.keyword) {
					param = {
						keyword: this.keyword,
						state: this.state
					}
				}
				await uni.request({
					url: '/index/myOrder',
					data: param,
					method: "GET",
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					},
					success: res => {
						this.list = res.data.filter(item => {
							return !item.refund_info || item.refund_info.state == '2' || item
								.refund_info.state == '5' || item.refund_info.state == '8'
						})
					}
				});
			},
			send(id) {
				uni.navigateTo({
					url: "/pagesA/send/send?id=" + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.items {
		height: calc(100vh - 228rpx);
		overflow: auto;

		.item {
			margin: 20rpx;
			background-color: white;
			padding: 20rpx;
			border-radius: 20rpx;

			image {
				min-width: 180rpx;
				width: 180rpx;
				min-height: 180rpx;
				height: 180rpx;
				max-height: 180rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>